<template>
  <CommonPage title="仓库定义">
    <template #mid>
      <SearchForm>
        <template #extraButtons>
          <a-button type="primary" @click="showCreateModal">新增仓库</a-button>
        </template>
      </SearchForm>
    </template>
    <SlTable :columns="columns" row-key="id" :data-source="tableData" :pagination="pagination" :loading="tableLoading">
      <template #bodyCell="{ column, record }: BodyCellOptions<Partial<WarehouseItem>>">
        <div v-if="column.key === 'oper'">
          <!-- <a class="mr-2" @click="addSubMenu(record)"> 新增下级 </a> -->
          <a @click="showUpdateModal(record)">编辑</a>
          <a class="ml-2 text-red-400" @click="handleDelete(record)">删除</a>
        </div>
      </template>
    </SlTable>
    <CURDDialog
      ref="CURDModalIns"
      id-key="id"
      :columns="columns"
      create-title="新增仓库"
      update-title="编辑仓库"
      delete-message="确认删除该仓库吗？"
      :show-options="showOptions"
      :model="model"
      :model-form-setting="modelFormSetting"
      :table-data="tableData"
      :curd="curd"
      :reload-table="reloadTable"
      @before-ok="beforeOk"
      @open="open"
    />
  </CommonPage>
</template>
<script lang="ts" setup>
import { ref, shallowRef } from "vue";
import { useI18n } from "/@/locales/useI18n";
import { useCURD } from "/@/hooks/useCURD";
import { FormItemComponentType, CURDAction, CURDDialogExpose } from "/@/components/CURDDialog/models";
import type { FormItemData, OperItem, ShowCURDModalOptions, CURDModalEvent } from "/@/components/CURDDialog/models";
import type { TableProps } from "ant-design-vue";
import { PatternKey } from "/@/utils/verify";
import { loopItem } from "/@/utils/treeData";
import type { BodyCellOptions } from "/@/types/antd";
import type { WarehouseItem } from "/@/api/main/pis/models";
import { Api } from "/@/api/main/pis";

const { t } = useI18n();
const columns = ref<TableProps<Partial<WarehouseItem>>["columns"]>([
  {
    title: "名称",
    dataIndex: "name",
  },
  {
    title: "位置",
    dataIndex: "location",
  },
  {
    title: "面积",
    dataIndex: "area",
  },
  {
    title: t("common.oper"),
    key: "oper",
    width: 100,
  },
]);
const model = ref<Partial<WarehouseItem>>({
  name: "",
  location: "",
  area: "",
});
const modelFormSetting: FormItemData<Partial<WarehouseItem>>[] = [
  {
    key: "name",
    max: 32,
    required: true,
    pattern: PatternKey.name,
  },
  {
    key: "location",
  },
  {
    key: "area",
  },
];

const CURDModalIns = shallowRef<CURDDialogExpose>();
const showOptions = ref<ShowCURDModalOptions>();

const { pagination, tableData, tableLoading, curd, reloadTable } = useCURD<WarehouseItem>({
  getDataUrl: Api.warehouseRoutes,
  cudUrl: Api.warehouses,
  // restful: true,
  // mockData: getStaticMenuData(),
  loadFilter(data) {
    if (!data) return [];
    loopItem(data, (item) => {
      if (!item.children || item.children.length === 0) {
        item.children = void 0;
      }
    });
    return data;
  },
});
const curItem = shallowRef<WarehouseItem>();
let curParentId: null | number = null;

function showCreateModal() {
  curItem.value = undefined;
  curParentId = 0;
  showOptions.value = { action: CURDAction.CREATE };
}
function showUpdateModal(record) {
  curItem.value = undefined;
  curParentId = record.parentId;
  showOptions.value = { action: CURDAction.UPDATE, record };
}
function handleDelete(record) {
  showOptions.value = { action: CURDAction.DELETE, ids: [record.id] };
}
function beforeOk(e: CURDModalEvent<Partial<WarehouseItem>>) {
  if (e.model) {
    if (curParentId !== null) {
      e.model.parentId = curParentId;
    }
  }
}
function open(e: CURDModalEvent<Partial<WarehouseItem>>) {}

function addSubMenu(record) {
  curItem.value = record;
  curParentId = record.id;
  showOptions.value = { action: CURDAction.CREATE };
}
</script>
